<!--模板-->
<template>
  <div class="header-panel">
    <!--左边部分-->
    <div class="header-panel-left">
      <div class="logo">
        <img :src="require('@/assets/img/zhinong3-1.png')" alt="logo">
      </div>
      <div class="left-button">
        <el-dropdown>
          <el-button type="primary">
            选择大棚<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>1号大棚</el-dropdown-item>
            <el-dropdown-item>添加大棚</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="left-button">
            <el-button class="el-button" type="primary" @click="startPlayer" >查看监控</el-button>
      </div>

    </div>

    <!--中间部分-->
    <div class="header-panel-middle">
      <div class="title">
        <dv-decoration-7 style="width:400px;height:55px;">可视化农业数据大屏</dv-decoration-7>
      </div>
    </div>


    <!--右边部分-->
    <div class="header-panel-right">
      <div class="right-decoration">
        <dv-decoration-1 style="width:200px;height:50px;" />
      </div>
      <div class="time-display">
        <div style="font-family: lcddigital ;font-size: 40px">{{ currentTime }}</div>
      </div>
    </div>


  </div>
</template>



<!--样式-->
<style scoped>
/* 顶部导航栏容器 */
.header-panel {
  width: 100%;  /* 确保占据父容器的全宽 */
  height: 100%; /* 确保占据父容器的全高 */
  display: flex;
  padding: 0 20px; /* 给左右两边添加内边距 */
  box-sizing: border-box; /* 确保边距不影响元素宽度 */
}

.header-panel-left {
  flex: 3; /* 左边部分占 3/10 */
  display: flex;
  align-items: center;
}
.header-panel-left.left-button{
  display: flex;
}
/* Logo */
.logo img {
  height: auto;  /* 保持图片比例 */
  width: 84px;  /* 固定 logo 宽度 */
  object-fit: contain; /* 防止图片拉伸 */
}
.zhinong {
  display: grid; /* 使用 grid 布局 */
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  grid-template-rows: repeat(2, 1fr); /* 两行布局 */
  text-align: center; /* 文字居中 */
  font-size: 18px; /* 设置文字大小 */
  font-weight: bold; /* 设置文字加粗 */
  color: white; /* 设置文字颜色 */
}

.zhinong .row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-button {
  flex-grow: 1; /* 使按钮部分占满剩余空间 */
  height: 100%;  /* 设置高度，实际高度根据需求调整 */
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 3px solid #3F96A5;
}
.el-button {
  background-color: rgb(1, 50, 32); /* 设置半透明的背景色 */
  border-color: rgb(1, 50, 32); /* 设置边框颜色为透明背景色 */
  color: white; /* 设置按钮文本颜色 */
}

/*中间部分*/

.header-panel-middle {
  flex: 4; /* 中间部分占 4/10 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* 垂直排列标题和装饰 */
  gap: 5px;
}
.header-panel-middle .title {
  font-size: 24px; /* 设置标题字体大小 */
  font-weight: bold; /* 设置字体粗细 */
  margin-bottom: 0px; /* 确保标题与装饰有一定间距 */
   display: inline-block; /* 设置为 inline-block 以确保横向排列 */
  white-space: nowrap; /* 确保文字不换行 */
}
.header-panel-middle .decoration {
  width: 100%; /* 设置 decoration 宽度 */
  height: auto; /* 设置 decoration 高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}


/* 右边部分 */
.header-panel-right {
  flex: 3;
  border-top: 3px solid #3F96A5;/* 右边部分占 3/10 */
  display: flex;
  justify-content: space-between;
}
.right-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.time-display{
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner-time {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-decoration {
  padding-top: 10px;
}

</style>
<!--行为-->
<script>
export default {
  data() {
    return {
      greenhouseId:"300023040198",
      currentTime: "",

    };
  },
  mounted() {
    // 在组件挂载后开始定时更新时间
    this.updateTime();
    setInterval(this.updateTime, 1000); // 每秒更新时间
  },
  methods: {
    // 更新当前时间
    updateTime() {
      const now = new Date();
      // 格式化时间为 hh:mm:ss
      this.currentTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} `
                            + `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
    },
    startPlayer(){
      this.$emit('startCenterPlayer');
    }
  },

};


</script>